<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <home></home>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  const CommonTitle = {
    template: `
      <div>
        title组件
        <button @click="emit">子向父组件通信</button>
      </div>  
    `,
    data(){
      return {
        msg: '我是子组件的数据'
      }
    },
    methods: {
      emit(){
        var a = 10 ;
        var b = '我是子组件数据';
        this.$emit('piupiupiu',{a,b});
      }
    }
  }

  const Home = {
    template: `
      <div>
      home组件
      {{ msg }}
      <hr>
      <common-title @piupiupiu='fn'></common-title>
    </div>  
    `,
    data(){
      return{
        msg:''
      }
    },
    methods: {
      fn({a,b}){
        console.log(a,b);
        this.msg =b;
      }
    },
    components: {
      CommonTitle
    }
  }
  Vue.component('Home', Home)
  const vm = new Vue ({
    el:'#app'
  })
</script>
</html>